<template>
  <div class="box collect">
    <header class="header">
      <van-nav-bar
        title="收藏"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </header>
    <div class="content">
      <van-empty description="收藏里空空如也" v-if="!cartList.length">
        <van-button round type="danger" class="bottom-button" @click="$router.push('/home')">
          去收藏吧
        </van-button>
      </van-empty>
      <div v-else>
        <van-swipe-cell v-for="(val,idx) in cartList" :key="val.proId">
          <van-card
            :price="val.price"
            :title="val.proName"
            :desc="val.time"
            class="goods-card"
          >
            <template #thumb>
              <van-image :src="val.proImg" fit="cover" />
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(val.proId,idx)" />
          </template>
        </van-swipe-cell>
        <van-submit-bar button-text="清空收藏" @submit="onSubmit">
          <template #tip>
            当前收藏总共： <span>{{cartList.length}}</span> 件
          </template>
        </van-submit-bar>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { SwipeCell, Card, Empty, SubmitBar, Checkbox, Image as VanImage, Stepper, Dialog, NavBar, Button } from 'vant'
import { getAllCollect, getDetail, deleteCollect, addOrder } from '../../api/index.js'

Vue.use(SwipeCell)
Vue.use(Card)
Vue.use(Empty)
Vue.use(SubmitBar)
Vue.use(Checkbox)
Vue.use(VanImage)
Vue.use(Stepper)
Vue.use(Dialog)
Vue.use(NavBar)
Vue.use(Button)

export default {
  data () {
    return {
      cartList: []
    }
  },
  computed: {
    allChecked: {
      get () {
        return this.cartList.every(val => {
          return val.flag
        })
      },
      set (v) {
        for (let i = 0; i < this.cartList.length; i++) {
          this.cartList[i].flag = v
        }
      }
    },
    numSum () {
      var a = 0
      for (let i = 0; i < this.cartList.length; i++) {
        if (this.cartList[i].flag) {
          a += this.cartList[i].num
        }
      }
      return a
    },
    priceSum () {
      var a = 0
      for (let i = 0; i < this.cartList.length; i++) {
        if (this.cartList[i].flag) {
          a += this.cartList[i].num * this.cartList[i].price
        }
      }
      return a
    }
  },
  mounted () {
    getAllCollect({
      userId: localStorage.getItem('userId')
    }).then(res => {
      if (res.data.state === 200) {
        const arr = res.data.data
        arr.forEach(val => {
          getDetail({ proId: val.proId }).then(data => {
            const obj = data.data.data[0]
            obj.time = val.time + ''
            this.cartList.push(obj)
          })
        })
      }
    })
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onSubmit () {
      let arr = []
      arr = this.cartList.filter(val => {
        return val.flag
      })
      console.log(arr)
      addOrder({
        userId: localStorage.getItem('userId'),
        proData: arr
      })
      this.$router.push('/order')
    },
    del (proId, idx) {
      Dialog.confirm({
        title: '标题',
        message: '弹窗内容'
      }).then(() => {
        deleteCollect({
          userId: localStorage.getItem('userId'),
          proId: proId
        }).then(res => {
          this.cartList.splice(idx, 1)
        })
      }).catch(() => {
        console.log('失败')
      })
    }
  }
}
</script>

<style lang="scss">
  .collect{
    .delete-button {
      height: 100%;
    }
    .van-card__thumb {
      display: flex;
      width: 1.2rem;
      img {
        width: 0.88rem;
      }
    }
  }
</style>
